<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中国地图</title>
    <script src="./js/vue.js"></script>
    <script src="./js/echarts.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/index.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        outline: none;
      }
      input {
        height: 30px;
        padding: 5px 10px;
        border-radius: 3px;
        border: 1px solid #979494;
      }
      #map {
        width: 70vw;
        height: calc(100vh);
      }
      #app {
        width: 100%;
        height: 100%;
        display: flex;
      }
      .content {
        flex: 1;
        background-color: #f7f7f7;
        padding: 15px;
        height: 100vh;
        overflow-y: auto;
      }
      p {
        margin: 10px 0;
        font-size: 12px;
        line-height: 16px;
      }
      p > span {
        color: #f7f7f7;
        background-color: #0aa1ed;
        padding: 1px 10px;
      }
      .btn {
        text-align: right;
        margin: 5px 0;
      }
      button {
        cursor: pointer;
        width: 100px;
        height: 40px;
        line-height: 41px;
        line-height: 40px\9;
        background-color: #4e6ef2;
        color: #ffffff;
        border-radius: 5px;
        font-size: 17px;
        box-shadow: none;
        font-weight: 400;
        border: 0;
        outline: 0;
        letter-spacing: normal;
      }
      .title {
        font-weight: bold;
        font-size: 18px;
        margin-top: 20px;
      }
      .title div {
        width: 100%;
        padding-left: 15px;
        font-weight: normal;
        font-size: 16px;
        margin-bottom: 10px;
      }
      .pro {
        padding: 0 15px;
      }
      .pro > div {
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 5px 0;
      }
      .pro > div:first-child {
        margin: 10px 0;
      }
      .pro > div > input,
      .pro > div > span {
        width: 30%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="map"></div>
      <div class="content">
        <p>
          说明：颜色格式为 <span>#ffffff</span> 或者
          <span>rgb(250,250,250)</span>
        </p>
        <div class="btn">
          <button @click="drawCharts">地图重绘</button>
          <button onClick="download()">地图下载</button>
        </div>
        <div class="title">
          基础属性设置
          <div>
            省份默认颜色：<input
              type="text"
              v-model="areaColor"
              spellcheck="false"
            />
          </div>
          <div>
            省份分界线颜色：<input
              type="text"
              v-model="borderColor"
              spellcheck="false"
            />
          </div>
          <div>
            省份字体颜色：<input
              type="text"
              v-model="textColor"
              spellcheck="false"
            />
          </div>
        </div>
        <div class="title">省份颜色设置</div>
        <div class="pro">
          <div>
            <span>省份名称</span>
            <span>省份字体色</span>
            <span>省份背景色</span>
          </div>
          <div v-for="(e,i) in data" :key="i">
            <span>{{e.name}}</span>
            <input type="text" v-model="e.color" spellcheck="false" />
            <input type="text" v-model="e.areaColor" spellcheck="false" />
          </div>
        </div>
      </div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          areaColor: "#eeeeff",
          borderColor: "#999999",
          textColor: "#333333",
          data: [
            {
              name: "北京",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "天津",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "河北",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "山西",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "内蒙古",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "辽宁",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "吉林",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "黑龙江",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "上海",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "江苏",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "浙江",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "安徽",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "福建",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "江西",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "山东",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "河南",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "湖北",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "湖南",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "重庆",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "四川",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "贵州",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "云南",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "西藏",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "陕西",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "甘肃",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "青海",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "宁夏",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "新疆",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "广东",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "广西",
              color: "#333333",
              areaColor: "#eeeeff",
            },
            {
              name: "海南",
              color: "#333333",
              areaColor: "#eeeeff",
            },
          ],
          chinaMap: null,
        },
        methods: {
          drawCharts() {
            // 基于准备好的dom，初始化echarts实例
            if (this.chinaMap) this.chinaMap.dispose();
            this.chinaMap = echarts.init(document.getElementById("map"));
            window.onresize = this.chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resize
            // data需要进行一次循环,填入设置。
            var customSettings = [];
            this.data.forEach(function (item, index) {
              customSettings.push({
                name: item.name,
                itemStyle: {
                  areaColor: item.areaColor,
                  color: item.areaColor,
                },
                label: {
                  normal: {
                    show: true, // 是否显示对应地名
                    textStyle: {
                      color: item.color,
                    },
                  },
                },
              });
            });
            // 南海单独设置，push 进数组
            customSettings.push({
              name: "南海诸岛",
              show: false,
              itemStyle: {
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                  },
                },
              },
              label: {
                show: false
              }
            });
            this.chinaMap.setOption({
              // 进行相关配置
              tooltip: {
                show: false,
              }, // 鼠标移到图里面的浮动提示框
              // dataRange: {
              //   show: false,
              // min: 0,
              // max: 1000,
              // text: ["High", "Low"],
              // realtime: true,
              // calculable: true,
              // color: ["orangered", "#FF9B52", "#FFD068"],
              // },
              geo: {
                // 这个是重点配置区
                map: "china", // 表示中国地图
                roam: true,
                label: {
                  normal: {
                    show: true, // 是否显示对应地名
                    textStyle: {
                      color: this.textColor,
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    borderColor: this.borderColor,
                    borderWidth: "1",
                    areaColor: this.areaColor,
                  },
                  emphasis: {
                    areaColor: null,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    // shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
                regions: customSettings,
              },
              series: [
                {
                  type: "scatter",
                  coordinateSystem: "geo", // 对应上方配置
                },
                {
                  name: "对应值", // 浮动框的标题
                  type: "map",
                  geoIndex: 0,
                  data: this.data,
                },
              ],
            });
          },
        },
        mounted() {
          this.drawCharts();
        },
      });
    </script>
  </body>
</html>
